<template>
	<view class="containter">
		<uv-navbar title="派单详情" titleStyle="color:#fff" leftIconColor="#fff" bgColor="#1071E7" @leftClick="leftClick"
			placeholder>
		</uv-navbar>
		<view class="warpper">
			<view class="block" style="padding: 0 30rpx 20rpx 30rpx;">
				<view class="ht">
					<text class="title">客户信息</text>
					<!-- <text class="edit" @click="toOrderEditPage" v-if="userInfo.is_seller == 1">编辑</text> -->
				</view>
				<view class="hb">
					<view class="hb-item">
						<view class="label">客户姓名：</view>
						<view class="value">{{orderInfo.connect_name}}</view>
					</view>
					<view class="hb-item">
						<view class="label">联系类型1：</view>
						<view class="value">{{connectType[orderInfo.connect_type]}}</view>
					</view>
					<view class="hb-item">
						<view class="label">联系方式1：</view>
						<view class="value">
							<text class="phoneNum">{{orderInfo.connect_information}}</text>
							<image class="copyTxt" @click="copyText(orderInfo.connect_information)"
								src="../../static/images/copy.png" mode=""></image>
							<image class="phoneIcon" v-if="orderInfo.connect_type == 1" @click="callPhone(orderInfo.connect_information)"
								src="../../static/images/dianhua.png" mode=""></image>
						</view>
					</view>
          <block v-if="orderInfo.connect_type_two">
            <view class="hb-item">
            	<view class="label">联系类型2：</view>
            	<view class="value">{{connectType[orderInfo.connect_type_two]}}</view>
            </view>
            <view class="hb-item">
            	<view class="label">联系方式2：</view>
            	<view class="value">
            		<text class="phoneNum">{{orderInfo.connect_information_two}}</text>
            		<image class="copyTxt" @click="copyText(orderInfo.connect_information_two)"
            			src="../../static/images/copy.png" mode=""></image>
            		<image class="phoneIcon" v-if="orderInfo.connect_type_two == 1" @click="callPhone(orderInfo.connect_information_two)"
            			src="../../static/images/dianhua.png" mode=""></image>
            	</view>
            </view>
          </block>
					<view class="hb-item">
						<view class="label">派单人：</view>
						<view class="value">{{orderInfo.dispatch_username}}</view>
					</view>
					<view class="hb-item">
						<view class="label">客户来源：</view>
						<view class="value">{{orderInfo.dispatch_area_name}}</view>
					</view>
					<view class="hb-item">
						<view class="label">派单时间：</view>
						<view class="value">{{orderInfo.created_at}}</view>
					</view>
          <view class="hb-item">
          	<view class="label">接单地区：</view>
          	<view class="value">{{orderInfo.receive_area_name?orderInfo.receive_area_name:'暂无'}}</view>
          </view>
					<view class="hb-item">
						<view class="label">接单人：</view>
						<view class="value">{{orderInfo.receive_username?orderInfo.receive_username:'暂无'}}</view>
					</view>
					<view class="hb-item">
						<view class="label">接单时间：</view>
						<view class="value">{{orderInfo.receive_at?orderInfo.receive_at:'暂无'}}</view>
					</view>
					<view class="hb-item">
						<view class="label">跟进时间：</view>
						<view class="value">{{orderInfo.updated_at}}</view>
					</view>
					<view class="hb-item">
						<view class="label">客户等级：</view>
						<view class="value">{{orderInfo.customer_level?orderInfo.customer_level:'暂无'}}</view>
					</view>
					<view class="hb-item">
						<view class="label">项目类型：</view>
						<view class="value">{{orderInfo.item_type?orderInfo.item_type:'暂无'}}</view>
					</view>
					<view class="hb-item">
						<view class="label">跟进内容：</view>
						<view class="value">{{orderInfo.last_follow_content?orderInfo.last_follow_content:'暂无'}}</view>
					</view>
					<view class="hb-item">
						<view class="label">备注：</view>
						<view class="value">{{orderInfo.source_remark?orderInfo.source_remark:'暂无'}}</view>
					</view>
					<view class="hb-item">
						<view class="label">图 片：</view>
						<view class="value images" v-if="orderInfo.source_images && orderInfo.source_images.length>0">
							<image class="img-item" v-for="(item, index) in orderInfo.source_images"
								@click="clickImg(item)" :src="item" mode=""></image>
						</view>
						<view v-else>暂无</view>
					</view>
				</view>
			</view>
			<view style="width: 100%;height: 30rpx;"></view>
			<view class="block">
				<view class="ht">
					<text class="title">活动记录</text>
				</view>
				<view class="activityInfo-warp">
					<uv-steps current="0" direction="column" v-if="orderInfo.follow && orderInfo.follow.length>0">
						<uv-steps-item v-for="(item, index) in orderInfo.follow" :key="index">
							<template v-slot:icon>
								<image class="stepIcon" src="../../static/images/step.png" mode=""></image>
							</template>
							<template v-slot:title>
								<view class="step-title">
									<text class="stepName">{{item.username}}</text>
									<text class="stepTime">{{item.created_at}}</text>
								</view>
							</template>
							<template v-slot:desc>
								<view class="stepContent">{{item.content}}</view>
								<view class="stepImgs">
									<image class="img" @click="clickImg(item2)" :src="item2" mode=""
										v-for="(item2, index2) in item.images" :key="index2">
									</image>
								</view>
							</template>
						</uv-steps-item>
					</uv-steps>
					<uv-empty v-else mode="data" icon="https://cdn.uviewui.com/uview/empty/car.png"></uv-empty>
				</view>
			</view>
			<view style="width: 100%;height: 30rpx;"></view>
			<view class="block">
				<view class="ht">
					<text class="title">操作记录</text>
				</view>
				<view class="activityInfo-warp">
					<uv-steps current="0" direction="column" v-if="orderInfo.clue_status && orderInfo.clue_status.length>0">
						<uv-steps-item v-for="(item, index) in orderInfo.clue_status" :key="index">
							<template v-slot:icon>
								<image class="stepIcon" src="../../static/images/step.png" mode=""></image>
							</template>
							<template v-slot:title>
								<view class="step-title">
									<text class="stepName">{{item.name}}</text>
									<text class="stepTime">{{item.created_at}}</text>
								</view>
							</template>
							<template v-slot:desc>
								<view class="stepContent">{{item.change_message}}</view>
				<!-- 				<view class="stepImgs">
									<image class="img" @click="clickImg(item2)" :src="item2" mode=""
										v-for="(item2, index2) in item.images" :key="index2">
									</image>
								</view> -->
							</template>
						</uv-steps-item>
					</uv-steps>
					<uv-empty v-else mode="data" icon="https://cdn.uviewui.com/uview/empty/car.png"></uv-empty>
				</view>
			</view>
			<view v-if="orderInfo.is_follow == 0 && orderInfo.receive_uid" style="width: 100%;height: 168rpx;"></view>
			<view class="footer" v-if="orderInfo.is_follow == 0 && orderInfo.receive_uid">
				<view class="btn" @click="cuidan">
					催他接单
				</view>
			</view>
			<uv-modal ref="modal" title="是否确认催单？" :showCancelButton="true" @confirm="confirm"></uv-modal>
		</view>
	</view>
</template>

<script>
	import reqApi from "../../api/api.js";
	export default {
		data() {
			return {
				orderInfo: {
					source_remark: ""
				},
				connectType: {
					1: "电话",
					2: "微信",
					3: "QQ",
					4: "其他"
				},
				sourceType: {
					1: "淘宝",
					2: "百度",
					3: "自拓",
					4: "其他"
				}
			}
		},
		onLoad(option) {
			this.getDetail(option.id);
		},
		methods: {
			leftClick() {
				uni.navigateBack({
					delta: 1
				})
			},
			// toOrderEditPage() {
			// 	uni.navigateTo({
			// 		url: `/pages/order/orderEdit?id=${this.orderInfo.id}`
			// 	})
			// },
			getDetail(id) {
				reqApi.orderDetail({
					id
				}).then(res => {
					console.log("订单详情", res);
					this.orderInfo = res.data;
				})
			},
			toRecordPage() {
				uni.navigateTo({
					url: `/pages/order/addRecord?id=${this.orderInfo.id}`
				})
			},
			cuidan() {
				this.$refs.modal.open();
			},
			confirm() {
				reqApi.reminder({
					id: this.orderInfo.id
				}).then(res => {
					uni.showToast({
						title: "催单成功",
						icon: 'none',
						mask: true,
						duration: 1500,
					})

				})
			},
			clickImg(url) {
				console.log("预览图片路径", url);
				// 预览图片
				uni.previewImage({
					urls: [url],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log(data);
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone, // 电话号码
					success: function() {
						console.log('拨号成功');
					},
					fail: function() {
						console.log('拨号失败');
					}
				});
			},
			copyText(text) {
				uni.setClipboardData({
					data: text,
					success: function() {
						uni.showToast({
							title: "复制成功",
							icon: 'none',
							mask: true,
							duration: 1500,
						})
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.activityInfo-warp {
		padding: 40rpx 0;
		box-sizing: border-box;

		.stepIcon {
			width: 60rpx;
			height: 60rpx;
		}

		.step-title {
			display: flex;
			align-items: center;

			.stepName {
				font-family: Microsoft YaHei UI, Microsoft YaHei UI;
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
				margin-right: 20rpx;
			}

			.stepTime {
				font-family: Microsoft YaHei UI, Microsoft YaHei UI;
				font-weight: 400;
				font-size: 24rpx;
				color: #AAAAAA;
			}
		}

		.stepContent {
			font-family: Microsoft YaHei UI, Microsoft YaHei UI;
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
			margin: 20rpx 0;
		}

		.stepImgs {
			display: flex;
			flex-wrap: wrap;

			.img {
				width: 120rpx;
				height: 120rpx;
				border-radius: 12rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}
		}
	}

	.footer {
		padding: 40rpx;
		box-sizing: border-box;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;

		.btns {
			display: flex;
			justify-content: space-between;

			.btn1 {
				width: 184rpx;
				height: 84rpx;
				border-radius: 20rpx;
				border: 2rpx solid #CFE3FA;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #1071E7;
				text-align: center;
				line-height: 88rpx;
			}

			.btn2 {
				width: 184rpx;
				height: 88rpx;
				background: linear-gradient(to top, #0992F5 0%, #1071E7 100%);
				border-radius: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.btn2 {
				width: 466rpx;
				height: 88rpx;
				background: linear-gradient(to top, #0992F5 0%, #1071E7 100%);
				border-radius: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;

				.icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 20rpx;
				}

				.txt {}
			}
		}
	}

	.containter {
		.warpper {
			padding: 20rpx;
			box-sizing: border-box;

			.block {
				padding: 0 30rpx;
				box-sizing: border-box;
				background: #fff;

				.ht {
					display: flex;
					justify-content: space-between;
					height: 100rpx;
					border-bottom: 2rpx solid #eee;
					align-items: center;

					.title {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
					}

					.edit {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #1071E7;
					}
				}

				.hb {
					margin-top: 20rpx;

					.hb-item {
						display: flex;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
						margin-bottom: 20rpx;

						.label {
							// width: 200rpx;
							text-align: justify;
						}

						.value {
							flex: 1;
							display: flex;
							flex-wrap: wrap;
							align-items: center;

							.phoneNum {}

							.copyTxt {
								width: 28rpx;
								height: 28rpx;
								margin: 0 30rpx;
							}

							.phoneIcon {
								width: 28rpx;
								height: 28rpx;
							}
						}

						.images {
							.img-item {
								width: 120rpx;
								height: 120rpx;
								border-radius: 12rpx;
								margin-right: 20rpx;
								margin-bottom: 20rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
